import React from 'react';
import './css/weixin.less';
import http from '../../utils/http';
import {startClock} from '../../utils/common';
import {WeiXinPic}from '../../utils/basic';
// import AmazingSwiper from './AmazingSwiper';

class WeiXin extends React.Component {
  state = {
    position: "",
    isphonetest:true,
    evaluation:"",
    truephonenum:"",
    mesgeval:"",
    timeText:'发送验证码',
    timePsw:'发送验证码',
    isabled:true,
    issendyzm:"",
    childrenage:"",
    getphonenumbright:true

  }
  // 发送验证码
  getCode = (phone) => {
    const data = {
      type: 1,
      account: phone
    }
    this.setState({
      issendyzm:"已发送短信验证码至您的手机",
    })
    
    http.post('/code/send/msgCode', data)
    .then(data => {
    }, err => {
      
    })
  }

 isphone2=(inputString)=>{
    var partten = /^1[3,5,8]\d{9}$/;
    if(partten.test(inputString))
    {
      this.setState({
        isphonetest:false,
      })
    }
    else
    {
      this.setState({
        truephonenum:"请输入正确的手机号",
      })
    }
}

Evaluation=( event) => {
  this.setState({evaluation: event.target.value});
}

changemesgeval=(event)=>{
  this.setState({mesgeval: event.target.value});
}

changechildrenage=(event)=>{
  this.setState({childrenage: event.target.value});
}

// 获取小孩信息
getyzm=()=>{
  const data = {
    age: Number(this.state.childrenage),
    mobile: this.state.evaluation,
    msgCode:"孩子亲人电话"

  }

  http.post('/infoGathering/save', data)
    .then(data => {
      if(data){
        this.setState({
          getphonenumbright:false,

        })
      }
    }, err => {
      
  })
}


  render() {
    return (
      <div>
        {this.state.getphonenumbright?
          (<div className="wxall">
            <div className="wxtop" style={{backgroundImage: `url(${WeiXinPic+"pic_backgroud-1@3x.png"})`,backgroundSize:"100%"}}  >
            {this.state.isphonetest?
              (<div className="inputhead">
                <p>{this.state.truephonenum} </p>
                <input className="getphone" value={this.state.evaluation} onChange={this.Evaluation} onBlur={()=>{this.isphone2(this.state.evaluation)}} placeholder="请输入您的手机号码"/>
                <img className="nowgetphone" src={WeiXinPic+'btn_free@3x.png'} alt="shoffutu" /> 
              </div>)
              :
              (<div className="inputafter">
                <p>{this.state.issendyzm}</p>
                <input className="getphonenum" autoComplete="off" value={this.state.mesgeval} onChange={this.changemesgeval} placeholder="请输入短信验证码"/>
                <input type="button" className={(!this.state.isabled?'spanbut':'nospanbut')} disabled={!this.state.isabled?'disabled':''} onClick={()=>{
                                  this.setState({
                                      isabled:false
                                  })
                                  startClock(true,60,(data)=>{
                                      this.setState({
                                          timeText:data
                                      })
                                      if(this.state.timeText==='发送验证码'){
                                          this.setState({
                                              isabled:true
                                          })
                                      }
                                  })
                                  this.getCode(this.state.evaluation)   
                  }} value={this.state.timeText}/><br/>
                <input className="getchilderage" value={this.state.childrenage} onChange={this.changechildrenage} placeholder="请填写您小孩的年龄"/>
                <img className="nowgetphoneafter" onClick={this.getyzm} src={WeiXinPic+'btn_free@3x.png'} alt="shoffutu" />
              </div>)
            }
              <img className="sometimegive" src={WeiXinPic+'pic_gift@3x.png'} alt="shoffutu" /> 
          
            </div>
            <div  className="wxbottom" style={{backgroundImage: `url(${WeiXinPic+'pic_backgroud-2@3x.png'})`,backgroundSize:"100%"}} > 
              <video width="332px" height="199px" controls="controls">
                <source src=" " type="video/mp4" />
                <source src="movie.ogg" type="video/ogg" />
                <source src="movie.webm" type="video/webm" />
                <object data="movie.mp4" width="320" height="240">
                  <embed src="movie.swf" width="320" height="240" />
                </object>
              </video>
              {/* <div  className="classcoursepicout" >
              {this.state.position}
                <AmazingSwiper option={{autoplay:true, loop: true}}>
                  <div  className="swiper-slide"> <img className="classcoursepic" src={WeiXinPic+'pic_kj-1@3x.png'} alt="shoffutu" />   </div>
                  <div  className="swiper-slide">   <img className="classcoursepic" src={WeiXinPic+'pic_kj-2@3x.png'} alt="shoffutu" />   </div>
                  <div  className="swiper-slide">   <img className="classcoursepic" src={WeiXinPic+'pic_kj-3@3x.png'} alt="shoffutu" />   </div>
                </AmazingSwiper>
              </div>

              <div  className="teacherintroduceout" >
              {this.state.position}
                <AmazingSwiper option={{autoplay:true, loop: true}}>
                  <div  className="swiper-slide"> <img className="teacherintroduce" src={WeiXinPic+'Ana@3x.png'} alt="shoffutu" />   </div>
                  <div  className="swiper-slide">  <img className="teacherintroduce" src={WeiXinPic+'pic_John@3x.png'} alt="shoffutu" />   </div>
                  <div  className="swiper-slide">  <img className="teacherintroduce" src={WeiXinPic+'pic_Samuel@3x.png'} alt="shoffutu" />   </div>
                </AmazingSwiper>
              </div> */}

              <img className="systmpic" src={WeiXinPic+'pic_kctx@3x.png'} alt="shoffutu" /> 
              <img className="pipilogo" src={WeiXinPic+'pic_logo@3x.png'} alt="shoffutu" /> 
          
            </div>
            {/* <img src={require('../../../images/analysis.png')} alt="报告" />   */}
          </div>)
          :
          (<div> 
            <img className="getphonenumbtrue" src={WeiXinPic+'pic_success@3x.png'} alt="shoffutu" /> 
         
           </div>

          )}


      </div>
    )
  }
}
export default WeiXin;